import { Button, Input } from '@arco-design/web-react';
import { useState } from 'react';
import RightContainer from '../rightcontainer';

/**
 * 查询&新增，多用于列表右上角
组合：文本框-查询按钮-新增按钮
 * @param param0 
onSearch 搜索按钮
onAdd 新增按钮
onInTime  实时查询
 * @returns 
 */
export default function SearchAndAdd(
	{
		placeholder = '请输入信息查询',
		onSearch,
		onAdd,
		onInTime,
	}: {
		placeholder?: string,
		onSearch(value: string): void,
		onAdd(): void,
		onInTime?(value: string): void
	}) {
	const [value, setValue] = useState('');
	return <>
		<RightContainer>
			{/* 使用字节组件 */}
			{/* <Input style={{ borderStyle: 'none' }} value={value} placeholder={placeholder} onChange={(v) => {
				setValue(v);
			}} />
			<Button onClick={() => {
				onSearch(value);
			}}>查询</Button>
			<Button onClick={onAdd}>新增</Button> */}
			{/* 使用标签 */}
			<input className='inp' type="text" value={value} placeholder={placeholder} onChange={(e) => {
				setValue(e.target.value);
				if (onInTime) {
					onInTime(value);
				}
			}} onKeyPress={(e) => {
				if (e.nativeEvent.key === 'Enter') {
					onSearch(value);
				}
			}} />
			<div className='btnv' onClick={() => {
				onSearch(value);
			}}>
				<input className='btn' type="button" value='查询' />
			</div>
			<div className='btnv' onClick={onAdd}>
				<input className='btn' type="button" value='新增' />
			</div>
			<style jsx>{`
.inp{
background-color: #FFFFFF;
color: #000000;
border-style: none;
height: 2rem;
}
.btnv{
display: flex;
justify-content: center;
align-items: center;
background-color: #1890FF;
border-style: none;
height: 2.2rem;
border-radius: 0.1875rem;
width: 4.5rem;
margin-left: 0.5rem;
}
.btn{
cursor: pointer;
background-color: #1890FF;
color: #FFFFFF;
font-size: 1rem;
border-style: none;
cursor: pointer;
}
			`}</style>
		</RightContainer>
	</>;
}
